<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性选择器*/
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>v-text 是为了解决 插值表达式闪烁的情况</h1>
    <p v-cloak>{{ msg }}</p>
    <div v-html="htmlContent"></div>
    <h2>复合数据类型展示 1. 单个值 2. 遍历</h2>
    <h3>1. 单个值</h3>
    <div>{{ arr }}</div>
    <div>{{ obj }}</div>
    <div>{{ list }}</div>
    <hr>
    <div>{{ arr[0] }}</div>
    <div>{{ arr[1] }}</div>
    <div>{{ arr[2] }}</div>
    <hr>
    <div>{{ obj['id'] }}</div>
    <div>{{ obj.name }}</div>
    <div>{{ obj.email }}</div>
    <hr>
    <div>{{ list[0].id }}</div>
    <div>{{ list[0].name }}</div>
    <div>{{ list[0].email }}</div>
    <hr>
    <h3>2. 数组遍历</h3>
    <!--ele标识符用户自定义-->
    <div v-for="ele in arr">{{ ele }}</div>
    <hr>
    <div v-for="(ele, index) in arr">{{index}}:{{ ele }}</div>
    <h3>3. 对象遍历</h3>
    <div v-for="ele in obj">{{ ele }}</div>
    <div v-for="(ele, attr) in obj">{{ attr }}:{{ ele }}</div>
    <h3>3. 对象数组遍历 [{}, {} ]</h3>
    <div v-for="val in list">
        <div>
            <p>{{ val.id }}</p>
            <p>{{ val.name }}</p>
            <p>{{ val.email }}</p>
            <hr>
        </div>

    </div>
</div>
</body>
<script src="lib/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            msg: 'hi vuejs!',
            htmlContent: '<h2>我是h2标签</h2>',
            content: '我是一段内容',
            /*复合数据类型 1. 数组 2. 对象 3. 对象数组*/
            arr: [12, 23, 4],
            obj: {id: 1, name: 'andy', email: 'andy@163.com'},
            list: [
                {id: 1, name: 'mark', email: 'mark@163.com'},
                {id: 2, name: 'leilei', email: 'leilei@163.com'},
            ],
        }
    })
</script>

</html>
